import React, { PureComponent } from 'react';
import { Dispatch } from 'redux';
import { connect } from 'dva';
import router from 'umi/router';
import { ArticleType } from '@/domains/article';
import { Loading } from '@/models/connect';
import { StateType } from './model';
import ArticleList from '@/components/ArticleList';

interface State {
  accountCenter: StateType;
  loading: Loading;
}

interface CenterProps {
  dispatch: Dispatch;
  accountCenter: StateType;
  loading: boolean;
}

interface CenterState {}

@connect(({ accountCenter, loading }: State) => ({
  accountCenter,
  loading: loading.models.accountCenter,
}))
class Center extends PureComponent<CenterProps, CenterState> {
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({ type: 'accountCenter/fetchArticleList' });
  }

  goArticle = (article: ArticleType) => {
    const { time } = article;
    const data = time.replace(/:/g, '_');
    router.push({ pathname: '/article/content', query: { data } });
  };

  render() {
    const { accountCenter, loading } = this.props;
    const { articleList } = accountCenter;
    return <ArticleList data={articleList} loading={loading} itemClick={this.goArticle} />;
  }
}

export default Center;
